<template>
  <!--教师页应该是一个纯粹的展示页，利用卡片或者div分区来展示教师的信息-->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="教师查询:">
        <el-input v-model="teachersearchForm.name"
                  style="width: 220px;"
                  @keydown.enter="selectTeacher()"
                  placeholder="请输入教师姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch()">重置</el-button>
        <el-button type="primary" @click="selectTeacher()">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

    <!--用来展示查询的老师的信息，没有查询的时候就是默认的教师信息，展示的应该是人为设置的教师-->
    <!--展示的图片或者信息要不要用redis来暂时存放呢？-->
    <!--教师信息做成从后端查找的方式来显示-->
  <el-table :data="teachers">
    <!--表的第一列显示的应该是教师的头像-->
    <el-table-column label="教师图片" width="250px"  align="center">
      <!--绑定图片路径问题思考：绑定本地的public不行:1、是defaut的问题？ 2、是这个标签的问题？-->
      <template #default="scope">
        <img :src='scope.row.imgUrl' height="200px">
      </template>
    </el-table-column>
    <el-table-column prop="name" label="教师姓名" align="center" width="150px"></el-table-column>
    <el-table-column prop="evaluation" label="教师评价" align="center"></el-table-column>
    <el-table-column prop="introduction" label="教师详细介绍" align="center"></el-table-column>
  </el-table>




</template>

<script setup>


import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

//1、定义一个查询教师的条件表格，
const teachersearchForm=ref({
  name:"",
  id:"",
  title:""
});

//2、定义一个存放查询得到的教师的数组
const teachers=ref([]);


//3、动态条件查找教师
const selectTeacher=()=>{
  console.log("这里是查找教师的方法")
  let data=qs.stringify(teachersearchForm.value);
  console.log(data);
  axios.get(BASE_URL+"7070/v1/teacher/select?"+data).then((response)=>{
    console.log(response.data);
    if(response.data.code==2000)
    {
        teachers.value=response.data.data;
        console.log(teachers.value);
        console.log("教师组的元素:",teachers.value[0].imgUrl);
    }
    else{
      ElMessage.error(response.data.msg);
    }
  })
};

//4、清空查询条件
const resetSearch=()=>{
  teachersearchForm.value={};
}



//一加载就查询指定的职称为精英的教师,并显示在页面之上
onMounted(()=>{
  teachersearchForm.value.title="精英";
  selectTeacher();
})

const user=ref(getUser());

</script>


<style scoped>

</style>